<template>
	<div class="gameSituationDatils">
		<p class="title">数据更新频率：截止到上一个0点 (活跃玩家只支持近60天查询)</p>
		<ul>
			<li v-for="(val,key) in datilsdata">
				<i v-if="key==0" class="icon iconfont" style="color:#f33d2c;">&#xe7f1;</i>
				<i v-if="key==1" class="icon iconfont" style="color:rgb(52, 73, 94);">&#xe7de;</i>
				<i v-if="key==2" class="icon iconfont" style="color:#47a947;">&#xe6f1;</i>
				<i v-if="key==3" class="icon iconfont" style="color:#f9af3f;">&#xe77c;</i>
				<i v-if="key==4" class="icon iconfont" style="color:#50bfff;">&#xe7ce;</i>
				<p class="first">{{val.value}}</p>
				<p class="second">{{val.name}}</p>
				<p class="three">{{val.sib.name}}：{{val.sib.value}}</p>
			</li>
		</ul>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus">
	.gameSituationDatils
		.title
			color: #266b70;
			font-size 12px
		ul
			overflow hidden
			border-top: 1px solid #cccccc;
			border-bottom: 1px solid #cccccc;
			margin-top 10px;
			padding 15px 0px
			width 100%
			li
				float left
				width 20%
				border-left 1px solid #cccccc
				box-sizing border-box
				height 75px
				position relative
				p
					text-align center
					line-height 26px
					font-weight bold
				.first
					color: #27977f;
					font-size: 22px;
				.second
					font-size 14px
				.three
					color #7b7c7c
					font-size 10px
				&:nth-of-type(1)
					border none
				.iconfont
					font-size 70px
					text-align center
					line-height 100%
					position absolute
					top 50% 
					left: 50%
					transform translate(-50%,-50%)
					z-index -1
					-moz-opacity:0.2;
					-khtml-opacity: 0.2;
					opacity: 0.2;
@media screen and (max-width: 1198px)
	.gameSituationDatils
		ul 
			li
				height 100px
				padding-top 15px					
				&:nth-of-type(5)
					padding-top 0
@media screen and (max-width: 940px) 
	.gameSituationDatils
		ul 
			li
				padding-top 0px
</style>
<script>
	export default{
		data() {
			return {
			}
		},
		methods: {
		},
		props: ["datilsdata"],
		mounted(){
		}
	}
</script>